<template>

  <div class="register">
    <div class="avatar">
     <img src="../assets/img/IMG_20210707_213457.jpg" alt="">
    </div>
   <div class="mains">
    <form  @submit.prevent="register">
      <div class="name">
       <input type="text" required v-model="model.username" placeholder="Username" >
    </div>
      <div class="password">
        <input type="password" required v-model="model.password"  placeholder="Password">
      </div>
      <div class="passwordSure">
        <input type="password" required v-model="model.passwordSure"  placeholder="PasswordSure">
      </div>
      <button type="submit">register</button>
    </form>
     </div>
   </div>
</template>

<script>
export default {
data() {
  return {
    model:{

    }
  }
},
methods: {
  
  async register() {
    
    const res = await this.$http.post('/register', this.model)
    this.$router.push('/')
     this.$message({
      type: 'success',
      message: '注册成功'
    })
  }
},
}
</script>

<style>
.register {
  position: relative;
}
.register .avatar {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translatex(-50%);
  width: 120px;
  height: 120px;
  border-radius: 60px;
  border: 3px solid #FFA9C2;
  overflow: hidden;
}
 .register .avatar img {
  width: 100%;
}
.register .mains {
  width: 400px;
  height: 380px;
  position: absolute;
  top: 300px;
  left: 50%;
  padding: 0 50px;
  text-align: center;
  transform: translatex(-50%);
  border-radius: 20px;
  background: -webkit-linear-gradient(top,#7286B8,#FFA9C2);     
}
.register input {
  border: 0;
  outline: none;
  background-color: rgba(0,0,0,0);
  border: 1px solid rgba(0,0,0,.3);
  border-radius: 8px;
  color: #fff;
  padding-left: 10px;
  font-size: 16px;
}
.register .name input{
  width: 100%;
  height: 50px;
  margin-top: 40px;
}
.register .password input{
  width: 100%;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.register .passwordSure input{
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
}

.register button {
border: 0;
 width: 100%;
 height: 45px;
 font-size: 16px;
 font-weight: 700;
 border-radius: 5px;
 margin-top: 10px;
}
</style>